<template>
    <div>

        <!-- 内容 -->
        <!-- 内容 -->
        <div class="content">
            <div class="titleClass" @click="Change">
                <div>{{ shieldName }}</div>
                <img style="margin:9px 12px 10px 11px;width:14px;height:6px;" src="../../../assets/images/Vector 830.png">
            </div>
            <div style="height: 93%;overflow: auto;">
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">基本信息</p>
                        <div class="divStyleText Flex" style="">
                            <div class="Flex">
                                <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                                <span>路线长度：</span>
                            </div>
                            <div>{{ formDataINFO.routelength }}KM</div>
                        </div>
                        <div class="divStyleText Flex" style="">
                            <div class="Flex">
                                <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                                <span>总环数：</span>
                            </div>
                            <div>{{ formDataINFO.ringnum }} 环</div>
                        </div>
                        <div class="divStyleText" style="">
                            <div class="Flex">
                                <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                                <span>直径：</span>
                            </div>
                            <div class="specialText"> {{ formDataINFO.diameter }}</div>
                        </div>
                        <div class="divStyleText" style="">
                            <div class="Flex">
                                <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                                <span>水文地质：</span>
                            </div>
                            <div class="specialText">
                                {{ formDataINFO.hydrogeololgy }}
                            </div>
                        </div>
                        <div class="divStyleText" style="">
                            <div class="Flex">
                                <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                                <span>线路参数：</span>
                            </div>
                            <div class="specialText">
                                {{ formDataINFO.lineparameter }}
                            </div>
                        </div>
                        <div class="divStyleText" style="">
                            <div class="Flex">
                                <img src="../../../assets/images/home/ListTitleicon.png" width="16" alt="">
                                <span>周边建构筑物情况：</span>
                            </div>
                            <div class="specialText">
                                {{ formDataINFO.surround }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">施工状态</p>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                施工状态
                            </div>
                            <div style="width: 41%;text-align: left;">
                                {{
                                    ShieldData.dgjstatus == 0 ? '掘进中' : ShieldData.dgjstatus == 1 ? '拼装中' : '停止中' }}
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                总环数
                            </div>
                            <div style="width: 41%;text-align: left;">
                                {{ formDataINFO.ringnum }}
                                <span style="margin-left: 5px;">环</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                施工环数
                            </div>
                            <div style="width: 41%;text-align: left;">
                                {{ ShieldData.sghs }}
                                <span style="margin-left: 5px;">环</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                施工进度
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span v-if="formDataINFO.ringnum != 0">
                                    {{ (ShieldData.sghs / formDataINFO.ringnum) < 1 ? ((ShieldData.sghs /
                                        formDataINFO.ringnum) * 100).toFixed(1) : ((ShieldData.sghs / formDataINFO.ringnum)
                                            * 100) }} </span>
                                        <span v-else>--</span>
                                        <span style="margin-left: 5px;">%</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">铰接移位</p>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                上移位
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.syw }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                下移位
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.xyw }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                左移位
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.zyw }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                右移位
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.yyw }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">运行参数</p>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                环号(环)
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.hNum }}</span>
                                <span style="margin-left: 5px;">环</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                今日推进
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.jrtjnum }}</span>
                                <span style="margin-left: 5px;">环</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                里程
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.lc }}</span>
                                <span style="margin-left: 5px;">m</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                净行程
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.jxc }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                推进距离
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.tjjl }}</span>
                                <span style="margin-left: 5px;">m</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                盾构机状态
                            </div>
                            <div style="width: 41%;text-align: left;">
                                {{
                                    ShieldData.dgjstatus == 0 ? '掘进中' : ShieldData.dgjstatus == 1 ? '拼装中' : '停止中' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">设备位移</p>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                A组推进位移
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.atjwy }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                B组推进位移
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.btjwy }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                C组推进位移
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.ctjwy }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                D组推进位移
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{
                                    ShieldData.dtjwy }}</span>
                                <span style="margin-left: 5px;">mm</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">设备土压</p>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                上部土压
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.sbty }}</span>
                                <span style="margin-left: 5px;">bar</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                右上土压
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.ysty }}</span>
                                <span style="margin-left: 5px;">bar</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                右下土压
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.yxty }}</span>
                                <span style="margin-left: 5px;">bar</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                左下土压
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.zxty }}</span>
                                <span style="margin-left: 5px;">bar</span>
                            </div>
                        </div>
                        <div class="divStyleText2 Flex JCSB">
                            <div style="width: 41%;text-align: right;">
                                左上土压
                            </div>
                            <div style="width: 41%;text-align: left;">
                                <span>{{ ShieldData.zsty }}</span>
                                <span style="margin-left: 5px;">bar</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contentClass" style="margin-top: 16px;">
                    <div style="margin: 16px 20px 0px 10px;">
                        <p style="text-align: center;margin-bottom: 14px;border-bottom: none;">异常报警统计</p>
                        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                            <van-swipe-item v-for="(el, index) in warnCoountList" :key="index">
                                <div>
                                    <div class="divStyleText2 Flex JCC">
                                        <div style="width: 41%;text-align: center;">
                                            报警标题
                                        </div>
                                        <div style="width: 41%;text-align: center;">
                                            {{ el.content }}
                                        </div>
                                    </div>
                                    <div class="divStyleText2 Flex JCC">
                                        <div style="width: 41%;text-align: center;">
                                            报警类型
                                        </div>
                                        <div style="width: 41%;text-align: center;">
                                            {{ el.type }}
                                        </div>
                                    </div>
                                    <div class="divStyleText2 Flex JCC">
                                        <div style="width: 41%;text-align: center;">
                                            报警等级
                                        </div>
                                        <div style="width: 41%;text-align: center;">
                                            {{ el.bjdj }}
                                        </div>
                                    </div>
                                    <div class="divStyleText2 Flex JCC">
                                        <div style="width: 41%;text-align: center;">
                                            状态
                                        </div>
                                        <div style="width: 41%;text-align: center;">
                                            {{ el.status }}
                                        </div>
                                    </div>
                                </div>
                            </van-swipe-item>
                        </van-swipe>
                    </div>
                </div>
            </div>
            <van-popup v-model:show="projectListshow" position="bottom" :style="{ height: '50%' }">
                <van-picker show-toolbar title="切换盾构机" :model-value="shieldId"
                    :columns="shieldEngineerList.map(item => { return { text: item.shieldname, value: item.id, } })"
                    @cancel="() => { projectListshow = false }" @confirm="updateShield" />
            </van-popup>
        </div>

    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { GetShieldList, GetDrivingparameters, GetShieldDatas, GetDJbjlb } from "@/api";
import { useAppStore } from "../../../store";
// import dayjs from "dayjs";
import { CreatedFormData } from "@/utils/CreatedFormData";
export default defineComponent({
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();

        const shieldId = ref([]);
        const shieldName = ref("--");
        const formDataINFO = ref({
            routelength: 0,
            ringnum: 0,
            diameter: '无',
            hydrogeololgy: '无',
            lineparameter: '无',
            surround: '无',
        })
        const ShieldData = ref({})
        const warnCoountList = ref([])
        const projectListshow = ref(false)
        const shieldEngineerList = ref([])
        const Change = () => {
            projectListshow.value = !projectListshow.value
            // shieldId.value = JSON.parse(localStorage.getItem("shieldId"))
        }

        const doRefresh = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                    pageIndex: 1,
                    pageSize: 9999,
                })
            const res = await GetShieldList(fd);
            shieldEngineerList.value = res.data ?? [];
            if (localStorage.getItem("shieldId") != null && res.data.some(item => item.id == JSON.parse(localStorage.getItem("shieldId"))[0])) {
                var data = res.data.filter(item => item.id == JSON.parse(localStorage.getItem("shieldId"))[0])[0]
                shieldId.value = [data.id];
                shieldName.value = data.shieldname;
            } else {
                res.data.length ? shieldName.value = res.data[0].shieldname : "--";
                res.data.length ? shieldId.value = [res.data[0].id] : 0;
            }
            GetINFO();
            GetShield();
            GetErrorCount();
        }
        const updateShield = ({ selectedValues, selectedOptions }) => {
            projectListshow.value = false;
            var data = shieldEngineerList.value.filter(item => item.id == selectedValues[0])[0]
            shieldName.value = data.shieldname;
            shieldId.value = selectedValues;
            localStorage.setItem("shieldId", JSON.stringify(selectedValues));
            GetINFO();
            GetShield();
            GetErrorCount();
        }
        const GetINFO = async () => {
            let fd = CreatedFormData(
                {
                    shieldid: shieldId.value,
                })
            const res = await GetDrivingparameters(fd);
            formDataINFO.value = res.data != null ? res.data : {};
        }
        const GetShield = async () => {
            const res = await GetShieldDatas({
                dgid: shieldId.value[0],
                pageIndex: 1,
                pageSize: 99999
            });
            ShieldData.value = res.data != null && res.data.length > 0 ? res.data[0] : {};
        }
        const GetErrorCount = async () => {
            let fd = CreatedFormData(
                {
                    dgid: shieldId.value,
                })
            const res = await GetDJbjlb(fd);
            if (res.code == 0) {
                warnCoountList.value = res.data == null ? [] : res.data
            }
        }

        onMounted(async () => {
            await doRefresh();
        });


        return {
            shieldId,
            shieldName,
            shieldEngineerList,
            formDataINFO,
            ShieldData,
            warnCoountList,
            projectListshow,
            projectInfo,
            updateShield,
            doRefresh,
            Change,
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../../../assets/images/Group 1000004723.png') no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    display: flex;
    justify-content: start;
    padding: 10px;
    width: 100%;
    flex-direction: column;
    background: url('../../../assets/images/盾构bg1.png') no-repeat;
    background-size: 100% 100%;
}

.Flex {
    display: flex;
    align-items: center;
}

.JCSB {
    justify-content: space-between;
}

.JCC {
    justify-content: center;
}

.contentClass .divStyleText {
    font-size: 24px;
    border-bottom: 1px solid #728b9a6b;
    padding: 12px 0;
}

.contentClass .divStyleText:last-child {
    border-bottom: none;
}

.divStyleText2 {
    background-image: linear-gradient(to right, rgba(28, 59, 104, 1), rgba(47, 61, 82, 0));
    margin-bottom: 24px;
    height: 48px;
    font-size: 24px;
}

.specialText {
    text-indent: 0em;
    padding-left: 0em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 12px 0px 0px 30px;
    line-height: 40px;
    // height: 80px;
}
</style>